import Taro from "@tarojs/taro"
import { View,Input,Image,Button} from '@tarojs/components'
import { AtForm,} from 'taro-ui'
import {useState} from 'react'
import { login } from '../../api/mode'
import './index.scss'
import openeyes from '../../images/eyes.png'
import hovereyes from '../../images/eyes_hover.png'


export default function AccountLogin(){
  const [userAccount,setUserAccount]=useState()
  const [password,setPassword]=useState()
  const [isHidePassword,setIsHidePassword]=useState(true)


  function onSubmit () {
    const value={userAccount:`${userAccount}`,password:`${password}`}
    // console.log(value);
    login(value).then(res=>{
    if(res.data.code===600){
      Taro.setStorageSync('auth',res.data.data.token)//存储jwt密钥
      Taro.setStorageSync('uid',res.data.data.uid)//存储uid
      console.log('登录成功');
      Taro.reLaunch({
        url: `/pages/index/index`,
      })    
    }else if (res.data.code===602){
      console.log('账号或密码错误');
      Taro.showToast({
        title:'账号或密码错误',
        icon:'error',
        duration:1500
      })
    }
    })
  }

  const changehide=()=>{
    // console.log("change",);
  setIsHidePassword(!isHidePassword)

  } 

  const jumpToRegister=()=>{
    Taro.redirectTo(
      {
        url:'/pages/register/register'
      }
    )
  }

  return(
    <View className='AccountLogin'> 
        <AtForm
          onSubmit={onSubmit.bind(this)}
        >


        <Input 
          className='AccountLoginInput'
          name='userAccount'  
          type='text' 
          placeholder='账号' 
          value={userAccount} 
          onInput={(e)=>
            {
              // console.log(e.detail.value);
              setUserAccount(e.detail.value)
            // console.log(`userAccount:${value}`)
          }} 
        />


          <View className=' passwordInputDiv '>
            <View className='at-row'> 
            <Input
              className='passwordInput at-col at-col-10' 
              password={isHidePassword}
              name='password'  
              type='text' 
              placeholder='密码' 
              value={password} 
              onInput={(e)=>{
               setPassword(e.detail.value);
              // console.log(`password:${value}`)
            }}
            />
        <View className='at-col at-col-2 passwordCard'>
          {
            isHidePassword
            ?
            <Image src={openeyes}  className='showPassword'  onClick={changehide} />
            :
            <Image src={hovereyes}  className='showPassword ' onClick={changehide} />
          }
        </View>
        <View className='at-col at-col-2'></View>
            </View>
          </View>

          <View className='registerHint' onClick={jumpToRegister}>
                没有账号？立即注册
              </View>
          
            {/* <LoginCheckBox /> */}
           <Button
             className='accountLoginButton'
             formType='submit'
            //  type='primary'
           >
        登录
      </Button>      
      </AtForm>
    </View>
  )
}